<template>
  <div class="divContainer">
    <el-card class="box-card" :size="size" shadow="never">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="8">
            <div class="top">
              <div class="topDiv"><img class="image_3" referrerpolicy="no-referrer" :src="defectIcon"/></div>
              <span class="title-span">缺陷隐患信息</span>
            </div>
          </el-col>
          <el-col :span="16" style="text-align: right;border-bottom: 1px solid #eee;">
            <el-date-picker
              v-model="searchInfo2.dates"
              type="daterange"
              align="right"
              :clearable="false"
              :size="size"
              unlink-panels value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeDate">
            </el-date-picker>

          </el-col>
        </el-row>
      </div>
      <div style="display: flex;height: 100%;">
        <div id="defectmain" style="height:100%;width: 100%;"></div>

      </div>


    </el-card>
  </div>
</template>

<script>
import {firstPage} from '@/api/firstPage.js'
import moment from "moment";

let echarts = require('echarts');

export default {
  name: "equip",


  data() {
    return {
      size: "",
      changeColor: false,
      iFrameUrl: '',
      defectIcon: require('./images/wodezhangdan(1).png'),
      dialogProps: {
        visible: false,
        title: '设备入库',
        width: "90%",
        top: "5px",
      },
      qxInfo: [],
      yhInfo: [],
      searchInfo2: {
        dates: [
          // new Date(new Date().setHours(0, 0, 0, 0) - 3600 * 1000 * 24 * 1),//默认开始时间
          new Date(new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate(),),//默认开始时间
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate(),
          ), // 默认结束时间
        ],
      },
    }
  },
  methods: {
    //时间格式换做查询
    changeDate() {
      this.yhInfo = []
      this.qxInfo = []
      let day = moment(this.searchInfo2.dates[0]).format('YYYY-MM-DD HH:mm:ss')
      let eday = moment(this.searchInfo2.dates[1]).format('YYYY-MM-DD HH:mm:ss')
      let frames = {
        edate: eday,
        sdate: day,
      }
      firstPage.getDefectsStatusXx(frames).then(res => {
        res.data.forEach((item) => {
          if (item.type == 1) {
            this.qxInfo.push({value: item.zsNum, name: '总数'})
            this.qxInfo.push({value: item.wclNum, name: '新发现'})
            this.qxInfo.push({value: item.yclNum, name: '已处理'})
          } else if (item.type == 2) {
            this.yhInfo.push({value: item.zsNum, name: '总数'})
            this.yhInfo.push({value: item.wclNum, name: '新发现'})
            this.yhInfo.push({value: item.yclNum, name: '已处理'})
          }
        })
        this.initChart();
      })
    },
    handleClose(done) {
      // this.$confirm("确认关闭？")
      // .then((_) => {

      this.dialogProps.visible = false;
      // })
      // .catch((_) => { });
    },
    initChart() {
      let myChart = echarts.init(document.getElementById("defectmain"));
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption({
        legend: {
          x: 'right',
          y: ' center',
          itemWidth: 25,
          itemHeight: 5,
          padding: [2, 0, 0, 0],

          data: ['缺陷信息', '隐患信息',]
        },
        grid: {
          top: '13%',
          left: '1%',
          bottom: '10%',
          right: '0%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['总数', '新发现', '已处理'],
            axisLabel: {
              interval: 0  //设置间隔为0
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            nameLocation: 'end',
            minInterval: 1,
            nameTextStyle: {
              padding: [0, 0, -200, -10],
              fontSize: 12
            }
          }
        ],

        series: [
          {
            name: '缺陷信息',
            type: 'bar',
            barGap: 0.2,
            barWidth: 15, // 柱子宽度
            itemStyle: {
              normal: {
                color: '#f8afaa',
                label: {
                  //  show: true, //开启显示
                  //  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            },
            data: this.qxInfo
          },
          {
            name: '隐患信息',
            type: 'bar',
            barGap: 0.2,
            barWidth: 15, // 柱子宽度
            itemStyle: {
              normal: {
                color: '#fea357',
                label: {
                  //  show: true, //开启显示
                  //  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            },
            data: this.yhInfo
          },
        ]
      });
      let that = this
      myChart.on('click', function (params) {
        that.yhEvent(params)
      })
      window.onresize = myChart.resize


    },
    initChart2() {
      // 源数据
      // let datas = [
      //   { value: 1048, name: "总数" },
      //   { value: 735, name: "新发现" },
      //   { value: 580, name: "已处理" },

      // ];

      let seriesArr = [];//series
      let XLabel = [];//x轴数据
      this.yhInfo.map((item, index) => {
        XLabel.push(item.name);
        let obj = {};
        obj.name = item.name;
        obj.type = "bar";
        obj.barWidth = 25;
        obj.stack = "广告";
        obj.data = [];
        for (var i = 0; i <= index; i++) {
          if (i != index) {
            obj.data.push(0);
          } else {
            obj.data.push(item.value);
          }
        }
        seriesArr.push(obj);
      });
      var option = {
        color: ["#facd91", "#ff8b7e", "#00bfbf",],
        grid: {
          top: '5%',
          left: '1%',
          bottom: '-3%',
          containLabel: true,
        },
        tooltip: {
          //trigger: 'axis',    //显示其他分类
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            console.log(params)
            return (
              '<span style="font-size:14px">' + '缺陷信息' + "<br/>" + params.name + "<br/>" + params.marker +
              '<span style="color:' + params.color + ';font-size:20px;">' + params.value + "个" + "</span>" +
              "</span>"


            );
          },
        },
        xAxis: [
          {
            type: "category",

            nameTextStyle: {
              padding: [0, 0, -20, -30]
            },
            data: XLabel,
            axisTick: {
              // 轴刻度
              show: false,
            },
            axisLabel: {
              // 轴文字
              //   color: "#A0B2D3",
              //   fontSize: 20,
            },

          },
        ],
        yAxis: [
          {
            type: "value",

            axisTick: {
              // 轴刻度
              show: false,
            },
            splitLine: {
              // 网格线
              show: true,
            },
            axisLine: {
              // 轴线
              show: false,
            },
            axisLabel: {
              // 轴文字
              fontSize: 0,
              color: '#f5eaff'
            },
          },
        ],

        series: seriesArr,
      };

      let myChart = echarts.init(document.getElementById("defectmain2"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },


  },
  mounted() {
    this.changeDate()
    //每1分钟取一次
    setInterval(() => {
      this.changeDate()
    }, 300000)


  },
}
</script>

<style scoped>
.divContainer {
  width: 100%;
  height: 100%;
  line-height: 35px;
}

.divContainer .el-card {
  border: 0px !important;
  border-radius: 0px;
  height: 100%;
}

.divContainer .el-card .el-card__header {
  padding: 0px 0px 0px 0px !important;
  border-bottom: none;
}

.divContainer .top {
  border-bottom: 1px solid #eee;
  padding-left: 5px;
}

.title-span {
  font-weight: bold;
}

.lenged {
  margin-right: 10px;
  width: 25px;
  height: 12px;
  display: inline-block;

}

.el-date-editor .el-range-input {
  font-size: 12px;
}

.el-date-editor .el-range-input {
  font-size: 12px !important;
}

.el-input__inner {
  border: 0 !important;
  /* box-shadow: 0px 0px 10px #e1e1e1; */
  border-bottom: 1px solid #eee;
  height: 30px;
  line-height: 30px;
}

.el-date-editor .el-range__icon, .el-date-editor .el-range-separator {
  line-height: 25px;
  font-size: 12px;
}
</style>
